<script setup lang="ts">
import { imagePath } from '@/libs/file-utils'

defineProps<{
  /** 是否显示 */
  show: boolean
  /** 标题 */
  title: string
  /** 确认按钮文案 */
  confirmText?: string
  /** 取消按钮文案 */
  cancelText?: string
}>()

defineEmits(['update:show', 'confirm', 'cancel'])

const icon_close = imagePath('icon-close.svg')
</script>

<template>
  <div
    class="dialog-box"
    :class="{ show }"
    @click="$emit('update:show', false)"
  >
    <div
      class="box"
      @click.stop=""
    >
      <div class="header">
        {{ title }}
        <div
          class="close"
          @click="$emit('update:show', false)"
        ></div>
      </div>

      <slot></slot>

      <div class="btns">
        <div
          v-if="cancelText"
          class="btn-common cancel"
          @click="$emit('update:show', false)"
        >{{ cancelText }}</div>
        <div
          class="btn-common confirm"
          @click="$emit('confirm')"
        >{{ confirmText || '确定' }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.dialog-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: rgba(#000, .5);

  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;

  touch-action: none;

  z-index: 99;

  &.show {
    opacity: 1;
    pointer-events: all;
  }

  .box {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 582rpx;
    padding-bottom: 36rpx;

    border-radius: 36rpx;
    background-color: #3f3f3f;
    box-shadow: 0 8rpx 20rpx 0 rgba(#000, .3);

    overflow: hidden;

    .header {
      width: 100%;
      height: 100rpx;
      box-sizing: border-box;
      background-color: #2f2f2f;

      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 36rpx;
      font-weight: bold;

      .close {
        position: absolute;
        top: 14rpx;
        right: 28rpx;
        width: 48rpx;
        height: 48rpx;
        padding: 10rpx;

        background-image: v-bind(icon_close);
        background-size: 28rpx 28rpx;
        background-position: center;
        background-repeat: no-repeat;
      }
    }

    .btns {
      padding: 0 20rpx;

      display: flex;

      .confirm {
        flex: 1;
        max-width: 360rpx;
      }

      .cancel {
        flex: 1;
        margin-right:16rpx ;
        box-sizing: border-box;
        border: 2rpx solid #FE4102;

        color: #FE4102;
        background-image: none;
      }
    }
  }
}
</style>